10

您所在的位置：网站首页 › packagejson build › 10

10

2023-04-24 06:34| 来源: 网络整理| 查看: 265

简介

Unbuild 是一个轻量级的编译工具，旨在帮助开发者快速简单地构建 JavaScript 项目。本文档将帮助你了解 Unbuild 的基本功能和使用方法。

目录安装 Unbuild 配置文件构建过程基本原理安装 Unbuild

首先，确保你已经安装了 Node.js。然后，在终端或命令提示符中运行以下命令以全局安装 Unbuild：

npm install -g unbuild 复制代码配置文件

创建一个名为 unbuild.config.js 的文件，并在项目根目录中放置它。以下是一个简单的配置文件示例：

module.exports = { // 输入文件，指定要处理的JavaScript文件 input: 'src/index.js', // 输出文件配置 output: { // 输出文件的路径及文件名 file: 'dist/bundle.js', // 输出格式，可以是 'amd', 'cjs', 'es', 'iife', 'umd' 等 format: 'iife', // 输出文件的变量名（当 format 为 'iife' 或 'umd' 时需要） name: 'myBundle', // 添加源映射支持 sourcemap: true, // 设置 banner，可以在输出文件顶部添加信息（如：版权信息、许可证等） banner: '/* My Project - v1.0.0 - MIT License */', }, // 插件列表，用于扩展Unbuild的功能 plugins: [ // 例如，添加代码压缩插件 require('unbuild-plugin-terser')(), // 添加其他插件 ], // 在构建过程中排除特定的外部依赖 external: ['lodash'], // 其他配置项 // ... }; 复制代码构建过程

在终端或命令提示符中，导航到项目目录，然后运行以下命令以开始构建过程：

unbuild 复制代码

构建完成后，输出文件将根据配置文件中指定的设置进行生成。

原理 1. 参数和配置解析

首先，Unbuild 会解析命令行参数、用户自定义的配置文件和项目的 package.json。它将这些配置合并，并根据用户定义的 preset 参数解析所需的预设。

const buildConfig: BuildConfig = tryRequire("./build.config", rootDir) || {}; const pkg: PackageJson & Record = tryRequire("./package.json", rootDir); const preset = resolvePreset( buildConfig.preset || pkg.unbuild?.preset || pkg.build?.preset || inputConfig.preset || "auto", rootDir ); 复制代码 2. 构建上下文和钩子

接下来，Unbuild 会创建一个构建上下文（BuildContext），用于存储构建过程中的各种信息。同时，Unbuild 也支持自定义钩子，这些钩子可以在构建过程的不同阶段执行。

const ctx: BuildContext = { options, warnings: new Set(), pkg, buildEntries: [], usedImports: new Set(), hooks: createHooks(), }; ctx.hooks.addHooks(preset.hooks); 复制代码 3. 构建准备和目录清理

在构建之前，Unbuild 会进行一些准备工作，如清理输出目录（如果选项中设置了 clean）。

await ctx.hooks.callHook("build:before", ctx); if (options.clean) { for (const dir of new Set(options.entries.map((e) => e.outDir).sort())) { await rmdir(dir!); await fsp.mkdir(dir!, { recursive: true }); } } 复制代码 4. 构建过程

Unbuild 支持多种构建器，如 Rollup、MkDist 和类型构建。根据配置的不同，Unbuild 会调用相应的构建器进行构建。

await typesBuild(ctx); await mkdistBuild(ctx); await rollupBuild(ctx); 复制代码 5. 构建完成和验证

构建完成后，Unbuild 会输出构建结果的相关信息，并进行一些验证。如果在构建过程中产生了警告，并且 failOnWarn 选项设置为 true，则 Unbuild 会以错误状态退出

await ctx.hooks.callHook("build:done", ctx); validateDependencies(ctx); validatePackage(pkg, rootDir, ctx); 复制代码

我在看很多插件和库的工程的时候，发现很多都用到了这个工具，比如element-plus和一些vite插件，所以写这个文档记录一下

【本文地址】

10

10

今日新闻

推荐新闻